<template>
  <el-header>
    <div class="user-info">
      <!-- 使用默认头像 -->
      <el-avatar :size="40" :src="userInfo.logo || defaultAvatar" style="margin-right: 10px" />
      <el-dropdown>
        <span style="line-height: 35px" class="username">{{ userInfo.nickName }}</span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="">个人中心</el-dropdown-item> <!--待完成-->
            <el-dropdown-item @click="handleExit">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </el-header>
</template>

<script setup lang="ts">
import { useRouterStore } from '../../store/useRouterStore'
import { useRouter } from 'vue-router'
import { getUserProfile } from '../../apis/user'
import { onMounted, reactive } from 'vue'
import { Message, Modal } from '@arco-design/web-vue'

const { changeRouter } = useRouterStore()
const router = useRouter()

// 创建一个响应式的 userInfo 对象
const userInfo = reactive({
  nickName: '',
  logo: ''
})

// 默认头像
const defaultAvatar = 'https://example.com/default-avatar.pnghttps://xjh-java-ai.oss-cn-beijing.aliyuncs.com/2025/06/0611c9a1-5348-4b6a-ab00-99327f6e52ad.png' // 替换为你的默认头像地址

const getUserInfo = async () => {
  const res = await getUserProfile()
  if (res.data.code === 200) {
    userInfo.nickName = res.data.data.nickName
    if(!userInfo.logo){
    userInfo.logo = res.data.data.logo
      }
  }
}

onMounted(() => {
  getUserInfo()
})

// 退出登录
const handleExit = () => {
  Modal.confirm({
    title: '确认退出',
    content: '您确定要退出登录吗？',
    okText: '确认',
    cancelText: '取消',
    onOk: () => {
      Message.success('退出成功')
      localStorage.removeItem('token')
      changeRouter(false)
      router.push('/login')
    }
  })
}
</script>

<style lang="less" scoped>
.el-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: white;
  color: black; // 修改为黑色以匹配内容颜色
  padding: 0 20px; // 添加内边距
  height: 60px; // 统一高度
}

.user-info {
  position: fixed;
  right: 30px;
  top: 10px; // 稍微调整位置
  color: black;
  z-index: 999; // 确保在其他元素之上
}

.username {
  transition: all 0.3s ease;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  &:hover {
    color: #409EFF; // 改变字体颜色为蓝色色调
    font-size: 16px; // 增大字体大小
    font-family: 'Arial', sans-serif; // 更改字体
  }
  &:focus {
    outline: none; // 移除焦点时的边框
    box-shadow: none; // 移除焦点时的阴影
  }
}
</style>
